<template>
  <view class="orderDetail">
	<view style="width: 100%;height: 10px;"></view>
    <view class="order_header">
      <view class="order_header_num">
        <span>订单号： {{orderDetail?orderDetail.order_num:''}}</span>
        <span class="wait_pay">{{orderDetail.status_name}}</span>
      </view>
    </view>
	
	<!-- <u-steps :list="stepList" :current="1"></u-steps> -->
	
	<!-- 物流信息 -->
	<div class="logistics" v-if="orderDetail.express&&orderDetail.express_num">
	  <div class="item">
	    <!-- <img src="../../../static/images/logistics-company.png"/> -->
	    <span>物流公司：{{orderDetail.express?orderDetail.express:''}}</span>
	  </div>
	  <div class="item item-spec">
	    <div style="display: flex;align-items: center">
	      <!-- <img src="../../../static/images/logistics-num.png"/> -->
	      <span>物流单号：<span style="color: blue">{{orderDetail.express_num?orderDetail.express_num:''}}</span></span>
	    </div>
	    <div @click="copyExpressNum" class="copy">复制</div>
	  </div>
	</div>
    <!-- 商品列 -->
    <view>
      <ul class="order-item">
        <li style="margin-bottom:15px;background:#fff">
          <view class="order-item-details" v-for="(value1,index1) in orderDetail.order_items" :key='index1' @click="toGoodsDetail(value1.merchant_medicine_id)">
            <img :src="value1.medicine_info.thumb_url" class="order-item-details-img" mode="aspectFill"/>
            <view class="order-item-details-name">
              <view class="details-name">
                  {{value1.medicine_info.name?value1.medicine_info.name:''}}
              </view>
              <view class="details-name" v-if="!value1.goods_spu_info">
              </view>
              <view class="details-name" v-if="value1.goods_spu_info">
                {{value1.goods_spu_info.size_spu_name==''?'':(value1.goods_spu_info.size_spu_name+'码')}}
                {{value1.goods_spu_info.color_spu_name==''?'':('，'+value1.goods_spu_info.color_spu_name)}}
              </view>
              <view class="details-number">
                <view class="details-number-money">￥{{value1.total_amount}}</view>
                <view class="details-number-number">X{{value1.num}}</view>
              </view>
            </view>
          </view>

          <view class="order-item-header">
            <view class="order-item-status">
              <view>支付方式</view>
              <view>微信支付</view>
            </view>
			<view class="order-item-status">
			  <view>药店名称</view>
			  <view>{{orderDetail.merchant_name}}</view>
			</view>
			<view class="order-item-status" v-if="orderDetail.merchant_info&&orderDetail.merchant_info.contact">
			  <view>药店联系方式</view>
			  <view>{{orderDetail.merchant_info.contact}}</view>
			</view>
			<view class="order-item-status" v-if="orderDetail.merchant_info&&orderDetail.merchant_info.address">
			  <view style="width: 130px;">药店地址</view>
			  <view style="line-height: 25px;">{{orderDetail.merchant_info.address}}</view>
			</view>
			<view class="order-item-status">
			  <view>配送方式</view>
			  <view v-if="orderDetail.delivery_method=='express_delivery'">快递</view>
			  <view v-if="orderDetail.delivery_method=='self_pick'">自提</view>
			  <view v-if="orderDetail.delivery_method=='instant_delivery'">即时配送</view>
			</view>
            <view class="order-item-status">
              <view>优惠券:</view>
              <view>{{orderDetail.coupon_name?orderDetail.coupon_name:'无'}}</view>
            </view>
			<view class="order-item-status">
			  <view>优惠金额:</view>
			  <view>{{orderDetail.coupon_reduce_price}}</view>
			</view>
            <view class="order-item-status">
              <view>运费</view>
              <view>￥{{orderDetail.delivery_fee?orderDetail.delivery_fee:'0'}}</view>
            </view>
            <view class="order-item-status">
              <view style="width: 20%;">备注:</view>
              <view style="width: 80%;">{{orderDetail.remark}}</view>
            </view>
            <view class="order-item-num">
              <view>合计:</view>
              <view>￥{{orderDetail?orderDetail.pay_amount:''}}</view>
            </view>
          </view>
        </li>
      </ul>

      <!-- 收获地址 -->
      <view class="address">
		  <view class="address_wrapper" v-if="orderDetail.delivery_method=='self_pick'">
		  	<view class="address_top">
		  	  <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/people.png"  class="address_top_header">
			  <text style="margin-left: 3px;">预留手机号:</text>
		  	  <view class="address_top_tel">{{orderDetail.address_info.phone}}</view>
		  	</view>
		  </view>
        <view v-else class="address_wrapper">
          <view class="address_top">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/people.png"  class="address_top_header">
            <view class="address_top_nick">{{orderDetail.address_info.consignee}}</view>
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/tel.png"  class="address_top_phone">
            <view class="address_top_tel">{{orderDetail.address_info.phone}}</view>
          </view>
          <view class="address_bottom">
            {{orderDetail?orderDetail.address_info.province:''}}-{{orderDetail?orderDetail.address_info.city:''}}-{{orderDetail?orderDetail.address_info.area:''}}-{{orderDetail?orderDetail.address_info.address:''}}
          </view>
        </view>
      </view>
      <!-- 收获地址结束 -->

      <!-- 商品列结束 -->
      <view class="total_count">
        <view>实付款：<span>￥{{orderDetail?orderDetail.pay_amount:''}}</span></view>
        <view>下单时间:  {{orderDetail?orderDetail.updated_at:''}}</view>
      </view>
	  
	  <!-- <view class="total_count" style="margin-top: 0;height: 50px;">
		  <view v-if="orderDetail.status==5||orderDetail.status==6||orderDetail.status==7" class="already-apply">该订单已申请退款服务，请<button open-type="contact">联系客服</button>查询处理进度</view>
	  </view> -->

	  <view style="width: 100%;height: 60px;"></view>
      <!-- 底部确认或取消订单 -->
      <view class="btn" v-if="orderDetail.status=='1'">
        <view class="grey" v-if="orderDetail.status=='1'" @click="cancel(orderDetail.order_num)">取消订单</view>
        <view v-if="orderDetail.status==1" @click="pay()">付款</view>
      </view>
	  <!-- 可以申请退款的状态：代发货、申请未通过 -->
	  <!-- <view class="btn" v-if="orderDetail.status!=1&&orderDetail.status!=3&&orderDetail.status!=5&&orderDetail.status!=6&&orderDetail.status!=7&&orderDetail.is_pay==1"> -->
	  <view class="btn" v-if="(orderDetail.status==2||orderDetail.status==8)&&orderDetail.is_pay==1">
	    <view @click="cancel(orderDetail.order_num)">申请退款</view>
	  </view>
	  <view class="btn" v-if="orderDetail.status==3">
	    <view @click="confirm()">确认收货</view>
	  </view>
    </view>
	
  </view>
</template>

<script>
  export default{
    name:'orderDetail',
    data() {
      return {
        orderDetail:'',
        address:'',
        orderNum:'',//订单编号
        steps: [],
        active:-1,
        myBalance: 0,
        payArray:['微信支付', '余额支付'],
        balance: '',
		stepList: []
      }
    },
    methods:{
	  
	  //取消订单
	  async cancelOrder(order_num) {
		  let userToken=wx.getStorageSync('userToken');
		  let data=await this.$api.userCancelOrder({'order_id':this.orderDetail.id,user_token:userToken},this.$baseUrl)
		  this.getOrderDetail();
		  wx.showToast({
		  	title: data.data.message,
		  	icon: 'none'
		  })
		  /* setTimeout(()=>{
		    wx.navigateBack({
		      delta: 1
		    })
		  }) */
	  },
	  
	  //申请取消弹出框
      cancel(order_num){
		let _this = this
		wx.showModal({
		  title: '取消订单',
		  content: this.orderDetail.status==1?'是否取消订单？':'是否申请退款？',
		  success (res) {
		    if (res.confirm) {
		      _this.cancelOrder(order_num);
		    }
		  },
		  fail:err=>{
		   console.log(err)
		  }
		})
      },
	  
      async getOrderDetail(){//获取商品订单快照
        let res=await this.$api.getMyOrderDetail({
          order_num:this.orderNum,
          user_token: wx.getStorageSync('userToken')
        },this.$baseUrl)
        if(res.data.level=='success'){
          this.orderDetail=res.data.data;
        } else{
			wx.showToast({
				title: res.data.message,
				icon: 'none'
			})
		}
      },
      
      async pay(){
           let _this=this
            var userToken=wx.getStorageSync('userToken')
            let res=await this.$api.weChatPayment({'order_num':this.orderDetail.order_num,user_token:userToken},this.$baseUrl)
            if(res.data.level=="success"){
				let data=res.data.data
				wx.requestPayment({
				  timeStamp: data.timeStamp,
				  nonceStr: data.nonceStr,
				  package: data.package,
				  signType: data.signType,
				  paySign: data.paySign,
				  success() {
					_this.getOrderDetail()
				    wx.showToast({
				    	title: '支付成功'
				    })
				  },
				  fail(res) {
				    wx.showToast({
				    	title: '取消支付',
						icon: 'none'
				    })
				  }
				})
			} else{
				wx.showToast({
					title: res.data.message,
					icon: 'none'
				})
			}
      },
	  
	  confirm(){
	  		let _this = this
	  		wx.showModal({
	  		  title: '确认收货',
	  		  content: '是否确认收货',
	  		  success (res) {
	  		    if (res.confirm) {
	  		      _this.confirmReceive();
	  		    }
	  		  },
	  		  fail:err=>{
	  		   console.log(err)
	  		  }
	  		})
	  },
	  
	  //确认收货
	  async confirmReceive(){
	       let _this=this
	        var userToken=wx.getStorageSync('userToken')
	        let res=await this.$api.confirmReceive({'order_id':this.orderDetail.id,user_token:userToken},this.$baseUrl)
	        if(res.data.level=="success"){
	  			let data=res.data.data
	  			this.getOrderDetail()
				wx.showToast({
					title: res.data.message
				})
	  		} else{
	  			wx.showToast({
	  				title: res.data.message,
	  				icon: 'none'
	  			})
	  		}
	  },
	  
	  copyExpressNum() {
	    wx.setClipboardData({
	      data: this.orderDetail.express_num?this.orderDetail.express_num:'',
	      success: function (res) {
	        wx.showToast({
	          title: '复制成功',
	        });
	      },
		  fail: function (err) {
		    console.log(err)
		  }
	    });
	  },
	  
      //跳转商品详情
      toGoodsDetail(id){
        wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
      },
    },
    onLoad(options){
      this.orderNum=options.num
      this.getOrderDetail();
    },
    onShow() {
      /* this.getOrderDetail(); */
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import "../../common/css/mixin";
  .orderDetail{
    width:100%;
    min-height: 100vh;
    background:#eee;
	color: #222222;
	font-size: 14px;
  }
  .order_header{
    &_num{
      background:#fff;
      display: flex;
      justify-content: space-between;
      align-items:center;
      height: 50px;
      &>span:nth-child(1){
        margin-left:10px;
      }
      &>span:nth-child(2){
        color:red;
        margin-right:10px;
      }
    }
  }
  .order_detail{
    margin-top:10px;
    display: flex;
    flex-wrap: wrap;
    padding:5px 0;
    background: #fff;
    &>view{
      width:100%;
      margin-left:10px;
      margin-top:5px;
      .name{
        margin-right:15px;
        margin-bottom: 5px;
      }
    }
  }
    // 商品列
  .flexBetween{
  display:flex;
  justify-content:space-between;
}
  .order{
    width:100%;
    &-item{
      background:#eee;
      padding-top:15px;
    }
    &-nav{
      position: fixed;
      top:0px;
      border-top:1px solid #eee;
      width:100%;
      height:40px;
      display:flex;
      background: #fff;
      &-item{
        flex:1;
        line-height:40px;
        text-align:center;
      }
      .select{
        border-bottom:1px solid red;
        color:red;
      }
    }
    &-item-header{
      width:calc(100% - 40px);
      margin:0px 20px;
      border-bottom:1px solid #eee;
      line-height:40px;
      .order-item-num{
        @extend .flexBetween;
      }
      .order-item-status{
        @extend .flexBetween;
        border-bottom: 1px solid #eee;
      }
    }
    &-item-details{
      width:calc(100% - 40px);
      margin:0px 20px;
      border-bottom:1px solid #eee;
      display:flex;
      height:100px;
      &-img{
        width:80px;
        height:80px;
        margin:10px 10px;
      }
      &-name{
        flex:1;
        margin-left:20px;
        overflow: hidden;
      }
      .details-name{
        margin-top:10px;
        height:24px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        .details-tip{
          width:60px;
          line-height:25px;
          border:1px solid black;
          border-radius:5px;
        }
      }
      .details-number{
        width:100%;
        line-height:25px;
        @extend .flexBetween;
      }
    }
  }
  .total_count{
    background: #fff;
    margin-top:15px;
    display: flex;
    justify-content: flex-end;
    align-content: space-around;
    flex-wrap: wrap;
    height: 60px;
    position: relative;
    &>view{
      width:100%;
      text-align: right;
      margin-right: 20px;
      color:gray;
      span{
        color:red;
      }
    }
    .after-sale{
      position: absolute;
      display: block;
      bottom: 10px;
      right: 20px;
      color: red;
      padding: 5px;
      border-radius: 4px;
      border: 1px solid red;
      font-size: 12px;
    }

    .already-apply{
      /* position: absolute;
      display: block; */
      width: 100%;
      /* bottom: 10px; */
      text-align: center;
      font-size: 14px;
      button{
        position: static;
        padding: 15px 0;
        background: none;
        color: blue;
        display: inline-block;
        font-size: 14px;
        line-height: 0;
        overflow: visible;
      }
      button::after{
        background: none;
        border: none;
        position: static;
      }
    }

  }

  // 底部确认订单
  .btn{
    display: flex;
    background: #fff;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    width:100%;
	padding: 8px 0;
    &>view{
      width:30%;
      text-align: center;
      line-height: 40px;
      background: red;
      color:#fff;
    }
    &>.grey{
      width:30%;
      text-align: center;
      line-height: 40px;
      background: #eee;
      color:gray;
	  margin-right: 8px;
    }
  }

  .wait_pay{
    color:red;
    margin-right: 15px;
  }
  .module{
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    background: rgba(0,0,0,0.5);
    @include flex();
    flex-direction: column;
  }
  .module-pay{
    width: 80vw;
    border-radius: 16rpx;
    background: #ffffff;
    /*padding: 30rpx;*/
    .del-icon{
      width: 60rpx;
      height: 60rpx;
      padding: 10rpx;
    }
    .title{
      width: 100%;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 32rpx;
    }
    .balance{
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
      height: 100rpx;
      line-height: 100rpx;
    }
    .tips{
      @include flex();
      flex-direction: row;
      border-bottom: 1rpx solid #eeeeee;
      border-top: 1rpx solid #eeeeee;
      span{
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        text-align: center;
        @include ellipsis(1);
      }
      span:first-child{
        width: 30%;
      }
      span:last-child{
        width: 70%;
      }
    }
    .btns{
      width: 100%;
      @include flex();
      flex-direction: column;
      padding: 30rpx 0;
      .to-pay{
        width: 30vw;
        background: #58be6a;
        color: #ffffff;
        border-radius: 16rpx;
        padding: 20rpx 0;
        text-align: center;
      }
    }
  }

  .logistics{
    width: calc(100% -80rpx);
    margin-top: 10px;
    min-height: 40px;
    padding: 0 40rpx;
    background: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    img{
      width: 30rpx;
      height: 30rpx;
    }
    .item{
      padding: 5px 0;
      display: flex;
      align-items: center;
    }
    .item-spec{
      width: calc(100% -80rpx);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .copy{
        height: 100%;
        padding: 0 5px;
        color: red;
      }
      img{
        width: 25rpx;
        height: 25rpx;
      }
    }
  }

  /* 收获地址  */
  .address{
    width:100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 12px;
    background: #fff;
    /* border-bottom: 1px dashed gray; */

  }
  .address img{
    width:16px;
    height: 16px;
  }
  .address_wrapper{
    flex:1
  }
  .address_tip{
    margin-left: 10px;
    font-size: 14px;
    flex:1;
  }
  .address_top{
    display: flex;
    align-items: center;
    padding:5px;
    margin-left:10px;
  }
  .address_top_nick{
    margin:0 10px;
  }
  .address_top_tel{
    margin:0 10px;
  }
  .address_bottom{
    margin-left:20px;
    margin-bottom: 10px;
  }
  
  .already-apply{
    position: absolute;
    display: block;
    width: 100%;
    bottom: 10px;
    text-align: center;
    font-size: 14px;
    button{
      position: static;
      padding: 15px 0;
      background: none;
      color: blue;
      display: inline-block;
      font-size: 14px;
      line-height: 0;
      overflow: visible;
    }
    button::after{
      background: none;
      border: none;
      position: static;
    }
  }
  
</style>
